/*
 * @Author: 鏉滀簩搴� 3224811364@qq.com
 * @Date: 2024-06-28 11:05:46
 * @LastEditors: 鏉滀簩搴� 3224811364@qq.com
 * @LastEditTime: 2024-07-16 14:55:04
 * @FilePath: src/layouts/ManageLayout.tsx
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 */
import React, {FC} from 'react';
import style from './ManageLayout.module.scss'
import {Outlet, useLocation, useNavigate} from "react-router-dom";
import {Button, Divider, message, Space, Spin} from "antd";
import {BarsOutlined, DeleteOutlined, PlusOutlined, StarOutlined} from '@ant-design/icons'
import {createQuestionService} from "../service/question";
import {useRequest} from "ahooks";
import useLoadUserData from "../hooks/useLoadUserData";
import useNavPage from "../hooks/useNavPage";
// 问卷管理结构
const ManageLayout: FC = () => {
  const nav = useNavigate()
  const {pathname} = useLocation()
  const {waitingUser} = useLoadUserData()
  useNavPage(waitingUser)

  const {loading, data, error, run: createQuestionClick} = useRequest(createQuestionService, {
    manual: true,
    onSuccess(result) {
      nav(`/question/edit/${result.id}`)
      message.success("创建成功")
    }
  })

  return (
    <div className={style.container}>
      <Space className={style.left} direction={'vertical'}>
        <p>ManageLayout left</p>
        <Button type={'primary'}
                onClick={createQuestionClick}
                size={'large'}
                disabled={loading}
                icon={<PlusOutlined/>}>
          创建问卷</Button>
        <Divider/>
        <Button size={'large'}
                type={pathname === '/manage/list' ? 'default' : 'text'}
                onClick={() => {
                  nav('/manage/list')
                }}
                icon={<BarsOutlined/>}>
          我的问卷
        </Button>
        <Button
          type={pathname === '/manage/star' ? 'default' : 'text'}
          onClick={() => {
            nav('/manage/star')
          }} size={'large'} icon={<StarOutlined/>}>
          星标问卷
        </Button>
        <Button size={'large'}
                type={pathname === '/manage/trash' ? 'default' : 'text'}
                onClick={() => {
                  nav('/manage/trash')
                }}
                icon={<DeleteOutlined/>}>
          回收站
        </Button>
      </Space>
      <div className={style.right}>
        {waitingUser ? <div style={{textAlign: 'center', marginTop: '60px'}}>
          <Spin/>
        </div> : <Outlet/>}
      </div>
    </div>
  );
};

export default ManageLayout;
